 

<template>
    <Card v-bind="$attrs" title="充电故障原因占比">
        <template #extra>
            <RangePicker
            @change="handleDateChange"
            v-model:value="dateRange"
            picker="date"
            valueFormat="YYYY-MM-DD"
            />
        </template>
      <div ref="chartRef" :style="{ height, width }"></div>
    </Card>
  </template>
  <script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { Card, RangePicker } from 'ant-design-vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { PropType } from 'vue';
  import { defHttp } from '@/utils/http/axios';

  defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '360px',
    },
  });
  
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  onMounted(() => {
    getData()
  });
  const getData = async () => {
    // getInstance()?.showLoading();
    // console.log(dateRange.value, 'rree')
    // const params = dateRange.value && dateRange.value.length ? {
    //     areaId,
    //     startDate: dateRange.value[0],
    //     endDate: dateRange.value[1] 
    // } : {
    //     areaId
    // }
    // let res = [];
    // try {
    //     res = await defHttp.get({
    //     url: '/statistic/dayPowerStatistic',
    //     params
    // })
    // } finally {
    //     getInstance()?.hideLoading();
    // }
    
     
    setOptions({
        series: [
        {
            name: '故障原因',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
                {
                    value: 8,
                    name: '车辆电流过大中止'
                },
                {
                    value: 3,
                    name: '拔枪终止'    
                },
                {
                    value: 1,
                    name: '车辆电压异常中止'
                },
                {
                    value: 6,
                    name: '平台终止'
                },
                {
                    value: 8,
                    name: '用户手动中止'
                }
            ]
        }]
    })
  };

  const reload = () => {
    getData();
  }
  defineExpose({
    reload
  });
  </script>
  